<template>
  <div class="card-style-layout">
    <Form>
      <div class="card-type">
        <h2 class="card-type-title">卡片类型选择</h2>
        <div class="card-type-item">
          <Form-item v-for="(item,index) in busResult.cardType" :key="index">
            <Checkbox-group v-model="item.data.cardType">
              <Checkbox :label="item.label">
                <span>{{item.name}}</span>
              </Checkbox>
            </Checkbox-group>
            <div class="card-item-right fr" v-if="false">
              <span class="card-item-txt">乘车优惠:</span>
              <Select v-model="item.data.salePrice" placeholder="请选择">
                <Option value="80">八折</Option>
                <Option value="90">九折</Option>
              </Select>
            </div>
          </Form-item>
        </div>
      </div>
      <div class="card-style">
        <h2 class="card-style-title">{{busResult.cardName.title}}</h2>
        <div class="card-style-item clearfix">
          <h2 class="card-style-item-title fl">{{busResult.cardName.smallTitle}}</h2>
          <Form-item>
            <Input v-model="cardStyleName" :placeholder="busResult.cardName.tips"></Input>
          </Form-item>
        </div>
        <div class="card-style-list clearfix">
          <div class="card-style-type fl" v-for="(item,index) in busResult.cardStyleUp" :key="index">
            <div class="card-style-type-top">
              <img :src="item.url" class="card-style-top-img">
              <div class="card-style-top-upload">
                <div class="upFile">
                  <Button type="primary">{{item.btnVal}}</Button>
                  <input type="file" class="ghost-file" @change="getCardImg(index)" :ref="'card'+index">
                </div>
              </div>
            </div>
            <div class="card-style-type-bottom">
              <h3 class="card-style-bottom-title">{{item.title}}</h3>
              <div class="card-style-bottom-txt" v-html="item.html"></div>
            </div>
          </div>
        </div>
      </div>
    </Form>
    <div class="bus-submit">
      <Button type="primary" @click="nextProgress">{{busResult.progressBtn}}</Button>
    </div>
  </div>
</template>
<script>
  import { mapState, mapActions } from 'vuex'

  export default {
    data () {
      return {
        dataId: JSON.parse(sessionStorage.getItem('dataId')),
        styleFiles: [null, null, null, null, null],
        cardStyleName: ''
      }
    },
    computed: {
      ...mapState('bus', ['busResult'])
    },
    created () {
      // 第一步获取用户配置信息
      let styleData = JSON.parse(sessionStorage.getItem('styleData'))
      if (styleData) {
        let checkData = styleData.listConfigurationCardType
        for (let i = 0; i < checkData.length; i++) {
          if (checkData[i].cardType === '1') {
            this.busResult.cardType[0].data.cardType = [1]
            this.busResult.cardType[0].data.salePrice = checkData[i].salePrice + ''
          } else if (checkData[i].cardType === '2') {
            this.busResult.cardType[1].data.cardType = [2]
            this.busResult.cardType[1].data.salePrice = checkData[i].salePrice + ''
          } else {
            this.busResult.cardType[2].data.cardType = [3]
            this.busResult.cardType[2].data.salePrice = checkData[i].salePrice + ''
          }
        }
        let imgUrlData = styleData.listConfigurationCardTypeImg
        for (let i = 0; i < imgUrlData.length; i++) {
          this.busResult.cardStyleUp[i].url = imgUrlData[i].imgUrl
        }
        this.cardStyleName = imgUrlData[0].imgAddress
      } else {
        this.getStyleData()
      }
    },
    methods: {
      ...mapActions('bus', ['busSubmit']),
      // 获取用户配置信息
      getStyleData () {
        let url = this.api.bus.getStyle
        let params = {
          alipayClientId: this.dataId
        }
        this.$axios.get(url, {params: params}).then((res) => {
          if (res.data.msg.code === '20000') {
            let styleData = res.data.data
            if (styleData && styleData.listConfigurationCardType !== '无数据' && styleData.listConfigurationCardTypeImg !== '无数据') {
              let checkData = styleData.listConfigurationCardType
              for (let i = 0; i < checkData.length; i++) {
                if (checkData[i].cardType === '1') {
                  this.busResult.cardType[0].data.cardType = [1]
                  this.busResult.cardType[0].data.salePrice = checkData[i].salePrice + ''
                } else if (checkData[i].cardType === '2') {
                  this.busResult.cardType[1].data.cardType = [2]
                  this.busResult.cardType[1].data.salePrice = checkData[i].salePrice + ''
                } else {
                  this.busResult.cardType[2].data.cardType = [3]
                  this.busResult.cardType[2].data.salePrice = checkData[i].salePrice + ''
                }
              }
              let imgUrlData = styleData.listConfigurationCardTypeImg
              for (let i = 0; i < imgUrlData.length; i++) {
                this.busResult.cardStyleUp[i].url = imgUrlData[i].imgUrl
              }
              this.cardStyleName = imgUrlData[0].imgAddress
              sessionStorage.setItem('styleData', JSON.stringify(styleData))
            } else {
              this.$Message.error({content: '请配置相关信息', duration: 5})
            }
          } else {
            this.$Message.error({content: res.data.msg.message, duration: 5})
          }
        }).catch((err) => {
          if (err) throw err
          this.$Message.error({content: '网络异常', duration: 5})
        })
      },
      // 获取用户选择图片信息
      getCardImg (index) {
        let files = this.$refs['card' + index][0].files[0]
        this.styleFiles[index] = files
        console.log(this.styleFiles)
        var reader = new FileReader()
        reader.readAsDataURL(files)
        let that = this
        reader.onload = function () {
          that.busResult.cardStyleUp[index].url = this.result
        }
      },
      nextProgress () {
        // 验证用户配置数据
        let one = this.busResult.cardType[0].data
        let two = this.busResult.cardType[1].data
        let three = this.busResult.cardType[2].data
        let cardCheck = one.cardType.length && one.salePrice ||
          two.cardType.length && two.salePrice ||
          three.cardType.length && three.salePrice
        let type = []
        if (one.cardType.length && one.salePrice) {
          let obj = {
            cardName: this.busResult.cardType[0].name,
            cardType: one.cardType[0],
            salePrice: one.salePrice
          }
          type.push(obj)
        }
        if (two.cardType.length && two.salePrice) {
          let obj = {
            cardName: this.busResult.cardType[1].name,
            cardType: two.cardType[0],
            salePrice: two.salePrice
          }
          type.push(obj)
        }
        if (three.cardType.length && three.salePrice) {
          let obj = {
            cardName: this.busResult.cardType[2].name,
            cardType: three.cardType[0],
            salePrice: three.salePrice
          }
          type.push(obj)
        }
        // 验证卡片名称数据
        let cardName = this.cardStyleName
        // 验证图片文件
        let imgFiles = this.styleFiles[0] &&
          this.styleFiles[1] &&
          this.styleFiles[2] &&
          this.styleFiles[3] &&
          this.styleFiles[4]
        if (!cardCheck) {
          this.$Message.error({content: '请选择卡片类型', duration: 5})
        } else if (!cardName) {
          this.$Message.error({content: '请填写卡片名称', duration: 5})
        } else if (!imgFiles) {
          this.$Message.error({content: '请选择卡片图片', duration: 5})
        } else {
          this.$Message.success('提交中。。。')
          let params = new FormData()
          params.append('files', this.styleFiles[0])
          params.append('files', this.styleFiles[1])
          params.append('files', this.styleFiles[2])
          params.append('files', this.styleFiles[3])
          params.append('files', this.styleFiles[4])
          params.append('alipayClientId', this.dataId)
          params.append('type', JSON.stringify(type))
          params.append('cardName', cardName)
          let obj = {
            params: params,
            mes: this.$Message
          }
          this.busSubmit(obj)
        }
      }
    }
  }
</script>

